<template>
    <el-popover placement="bottom-start" width="35%" @hide="resetMerchantPopover" trigger="click" :visible="popoverVisivle">
        <template #reference>
            <el-input 
            v-model="form.icon" 
            placeholder="请选择图标"
            readonly
            :prefix-icon="form.icon"
            @click="iconInputClick"></el-input>
        </template>
        <ElementIcon 
        ref="elementIconRef"
        @iconItemClick="iconItemClick"></ElementIcon>
    </el-popover>
</template>

<script setup>
import ElementIcon from '@/components/system/element-icon.vue';

let iconInputInfo = defineProps({
    form: {
        type: Object,
        default: () => {}
    },
    
    billState: {
        type: Boolean,
        default: false
    }
});

// 初始值为null 不会影响下次点击时的显示和隐藏效果
let popoverVisivle = ref(null);
// 当前状态
function iconInputClick() {
    iconInputInfo.billState ? popoverVisivle.value = false : popoverVisivle.value = null;
};

// 隐藏时触发
const elementIconRef = ref(null);
function resetMerchantPopover() {
    elementIconRef.value.searchKey = '';
    popoverVisivle.value = null;
};

// 图标点击
function iconItemClick(name) {
    iconInputInfo.form.icon = name;
    popoverVisivle.value = false;
};
</script>

<style lang="scss" scoped>

</style>
